<template>
	<view class="indexContainer">
		<view class="header">
			<image class="logo" src="../../static/images/logo.png" mode=""></image>
			<view class="search">
				<i class="iconfont icon-sousuo"></i>
				<input class="searchInput" type="text" value="" placeholder="搜索商品" placeholder-class="placeholder" />
			</view>
			<button type="" class="username">{{userName}}</button>
		</view>
		<scroll-view scroll-x="true" class="navScroll" enable-flex="true" v-if="indexData.kingKongModule" >
				<view class="navItem" :class="{active:currentIndex==-1}" @click="getActive(-1)">推荐</view>
				<view class="navItem" :class="{active:currentIndex===index}" v-for="(item,index) in indexData.kingKongModule.kingKongList"
				:key="item.L1Id" @click="getActive(index)">{{item.text}}</view>
		</scroll-view>
		<scroll-view class="recommendScroll" scroll-y="true" >
			<recommend v-if="currentIndex === -1"></recommend>
			<cateList :navIndex="currentIndex" v-else></cateList>
		</scroll-view>
	</view>
</template>
 
<script>
	import Recommend from '../../components/recommend/recommend.vue'
	import cateList from '../../components/cateList/cateList.vue'
	import request from '../../utils/request.js'; 
	import {mapState} from 'vuex'
	export default {
		components:{
			Recommend,
			cateList
		},
		data() {
			return {
				title: 'Hello',
				currentIndex: -1,
				userName:''
				// indexData:{}
			}
		},
		/*
		onLoad->当页面加载时
		mounted->页面挂载完毕之后
		1.uniapp-不仅支持小程序的组件,还支持小程序的生命周期函数
		2.无论是uniapp还是mpvue,都推荐使用Vue的生命周期

		*/
		async mounted() {
			// let result = await request('/getIndexData')
			// //如果成功 则把return的数据返回给 async
			// //如果失败 则把错误信息返回 promise 不执行下面代码
			// if (!result) {
			// 	console.log("请求失败");
			// 	//可以放简单的初始值
			// 	result = ['推荐','居家生活','服饰鞋包']
			// } 
			// this.indexData = result.name;
			
			this.$store.dispatch('getIndexData')
			let userInfo = uni.getStorageSync('userInfo')
			this.userName = JSON.parse(userInfo).nickName
		},
		onLoad() {
			console.log("onLoad");
		},
		methods: {
			getActive(index){
				this.currentIndex = index
				// this.$store.commit('test')
				// this.$store.commit('test2')
				// setTimeout(()=>{
				// 	console.log(this.$sto  re.state.home.initData);
				// },2000)
				// this.$store.dispatch('test3',{
				// 	initData:"我是修改之后的数据3",
				// 	num:123
				// })
			}
		},
		computed:{
			// initData(){
			// 	return this.$store.state.home.initData
			// },
			// //模块化必须是对象形式
			...mapState({
				initData:state=>state.home.initData,
				indexData:state=>state.home.indexData
			})
		}
	}
</script>

<style lang="stylus">
.indexContainer
	height 100%
	.header
		display flex
		align-items center
		padding-top 20upx
		.logo
			width 116upx
			height 40upx
			margin 0 20upx
			flex-shrink 0
		.search
			height 60upx
			background-color #eee
			border-radius 10upx
			position relative
			.iconfont
				position absolute
				left 20upx
				top 50%
				transform translateY(-50%)
			.searchInput
				height 100%
				padding-left 60upx
			.placeholder
				text-align center 
				font-size 22upx
				text-indent -60upx
		.username
			width auto
			height 60upx
			line-height 60upx
			font-size 28upx
			flex-shrink 0
			margin 0 20upx
			color red
			
	.navScroll
		// display flex
		white-space nowrap
		.navItem
			display inline-block
			font-size 28upx
			width 140upx 
			height 80upx
			line-height 80upx
			margin 0 10upx
			text-align center
			// 父级引用器
			&.active
				border-bottom 4upx solid #ff0000
				border-radius 2upx
	.recommendScroll
		// height calc(100vh - 162upx - 88upx - 100upx)
		//--window-top->header占用的高度->H5端44px->小程序端0px
		//--window-bottom->tabBar占用的高度->H5端50px->小程序端0px

		height calc(100vh - 162upx - var(--window-top) - var(--window-bottom))
</style>
